<template>
  <template v-if="loading">
    <!-- loading 界面，可以使用第三方库如 ElementUI 的 Loading 组件 -->
    <a-spin dot />
  </template>
  <el-card class="order-container" v-else>
    <div class="data">
      <el-card class="data-item" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>订单状态</span>
          </div>
        </template>
        <div>
          {{ $filters.orderMap(state.tableData[0].orderStatus) }}
        </div>
      </el-card>
      <el-card class="data-item" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>创建时间</span>
          </div>
        </template>
        <div>
          {{ state.tableData[0].createTime }}
        </div>
      </el-card>
      <el-card class="data-item" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>订单号</span>
          </div>
        </template>
        <div>
          {{ state.tableData[0].orderNo }}
        </div>
      </el-card>
    </div>
    <el-table :data="state.tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column label="商品图片">
        <template #default="scope">
          <img style="width: 100px" :key="scope.row.goodsId" :src="scope.row.goodsCoverImg" alt="商品主图">
        </template>
      </el-table-column>
      <el-table-column prop="goodsId" label="商品编号">
      </el-table-column>
      <el-table-column prop="goodsName" label="商品名"></el-table-column>
      <el-table-column prop="goodsCount" label="商品数量">
      </el-table-column>
      <el-table-column prop="sellingPrice" label="价格">
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const { id } = route.query
const state = reactive({
  tableData: []
})
const loading = ref(true); // 添加 loading 标志
onMounted(() => {
  axios.post(`http://localhost:8080/order/searchOrderDetail/${id}`).then(res => {
    state.tableData = res.data
    loading.value = false; // 数据获取完毕，将 loading 标志置为 false
    console.log(res);
  })
})
</script>

<style scoped>
.data {
  display: flex;
  margin-bottom: 50px;
}

.data .data-item {
  flex: 1;
  margin: 0 10px;
}

.el-table {
  border: 1px solid #EBEEF5;
  border-bottom: none;
}

.has-gutter th {
  border-right: 1px solid #EBEEF5;
}

.has-gutter th:last-child {
  border-right: none;
}

.el-table__row td {
  border-right: 1px solid #EBEEF5;
}

.el-table__row td:last-child {
  border-right: none;
}
</style>